﻿@model BlogViewModel
@{
    ViewBag.Title = "写博客";
}

<script src="~/lib/tinymce/tinymce.min.js"></script>
<script>
    tinymce.init({
        selector: '#mytextarea',
        skin: 'oxide-dark',
        language: 'zh_CN',//配置中文
        images_upload_url: '/Upload/TinynceImg',
        plugins: 'advlist autolink lists link image imagetools charmap print preview anchor textcolor searchreplace visualblocks code fullscreen  insertdatetime media table contextmenu paste code help wordcount',
        toolbar: 'preview link code insertdatetime  charmap | media  image | undo redo |  formatselect | bold italic backcolor  | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent  | removeformat | help',
        images_upload_url: '/Upload/TinynceImg',
        convert_urls: false//屏蔽自动转为相对路径

    });
</script>
<form id="create_form" class="layui-form">

    <input asp-for=Content style="visibility:hidden" />
    <textarea  id="mytextarea"></textarea>
    <div style="height:10px"></div>
    <div class="layui-form-item">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-block">
            <input type="text" asp-for="Title" value="" lay-verify="required" placeholder="标题" lay-reqtext="请填写文章标题" autocomplete="off" class="layui-input" lay-affix="clear">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">简介</label>
        <div class="layui-input-block">
            <textarea asp-for="Introduction" class="layui-textarea"></textarea>
        </div>
    </div>
   <div class="layui-inline layui-form-item">
        <label class="layui-form-label">类别</label>
        <div class="layui-input-block">
        <select id="blogType" lay-verify="required" lay-search>
            @foreach (var type in Model.BlogTypes)
            {
                <option value=@type.Id>@type.Name</option>
            }
        </select>
    </div>
    </div>
    <input asp-for="BlogTypeId " style="visibility:hidden" />
    <div class="layui-form-item">
        <label class="layui-form-label">封面</label>
        <div style="float:left">
            <button type="button" class="layui-btn" id="ID-upload-demo-btn">
                <i class="layui-icon layui-icon-upload"></i> 上传
            </button>
            <div style="width: 132px;">
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
                    <div id="ID-upload-demo-text"></div>
                </div>
                <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
                    <div class="layui-progress-bar" lay-percent=""></div>
                </div>
            </div>
        </div>
        <input asp-for="Photo" value="" style="visibility:hidden"/>
    </div>

    <button id="create" class="layui-btn layui-btn-radius" lay-submit lay-filter="create">发布</button>
</form>

<script>
    var photoFile;
    layui.use('form', function () {
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery
        //layui表单提交方法
        form.on('submit(create)', function (data) {
            var content = tinyMCE.activeEditor.getContent();  //提取富文本内容
            $('#Content').val(content);
            $('#BlogTypeId').val($("#blogType").val());
            //blogType
            var blog = $('#create_form').serialize() ;
            console.log(blog.title);
            $.post('/Blog/Create', blog, function (res) {
                if (true == res.success)//如果成功则跳转到指定页面
                    location.href = "/Blog/PublishFinish/"+res.data.id;
                else {//失败则弹出失败提示
                    layer.msg(res.message, { icon: 5 });
                }
                
            });
            return false;
        });
    });


    layui.use(function () {
        var upload = layui.upload;
        var layer = layui.layer;
        var element = layui.element;
        var $ = layui.$;
        // 单图片上传
        var uploadInst = upload.render({
            //auto: false,
            //bindAction: '#create'
            elem: '#ID-upload-demo-btn',
            url: '/Upload/Image', // 此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            before: function (obj) {

                // 预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {

                    console.log("result:" + result);
                    $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
                    $('#PhotoFile').attr('src', result); // 图片链接（base64）
                    photoFile=file;
                });
                element.progress('filter-demo', '0%'); // 进度条复位
                layer.msg('上传中', { icon: 16, time: 0 });
            },
            done: function (res) {
                // 若上传失败
                if (res.code > 0) {
                    $('#ID-upload-demo-img').attr('src', null);
                    return layer.msg('上传失败');
                }
                // 上传成功的一些操作
                console.log(res);
                $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
                $('#Photo').val(res.name);
                $('#ID-upload-demo-img').attr('src',res.data); // 图片链接（base64）
            },
            error: function () {
                // 演示失败状态，并实现重传
                var demoText = $('#ID-upload-demo-text');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            },
            // 进度条
            progress: function (n, elem, e) {
                element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
                if (n == 100) {
                    layer.msg('上传完毕', { icon: 1 });
                }
            }
        });
    });
</script>